{% extends 'frame.html' %}
{% block title %}Connect{% endblock %}
{% block main %}<strong>连接</strong> | Connect{% endblock %}
{% block body %}

<div class="mdui-container botp mdui-m-b-5">
    <svg class="mdui-center mdui-text-color-black" width="100" height="100" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"><path d="M18.816 13.58c2.292 2.138 3.546 4 3.092 4.9c-.745 1.46-5.783-.259-11.255-3.838c-5.47-3.579-9.304-7.664-8.56-9.123c.464-.91 2.926-.444 5.803.805"></path><circle cx="12" cy="12" r="7"></circle></g></svg>
    <div class="mdui-container"><div class="mdui-container"><div class="mdui-container">
        <div class="mdui-textfield mdui-m-t-2">
            <label class="mdui-textfield-label">行星地址 | Planet Address</label>
            <input id="addr" style="text-align:center;" class="mdui-textfield-input" type="text"/>
        </div>
        <div class="mdui-textfield mdui-m-t-2">
            <label class="mdui-textfield-label">登录身份 | Account</label>
            <input id="acc" style="text-align:center;" class="mdui-textfield-input" type="text"/>
        </div>
        <div class="mdui-textfield mdui-m-t-2">
            <label class="mdui-textfield-label">认证代码 | Safe Code</label>
            <input id="pwd" style="text-align:center;" class="mdui-textfield-input" type="password"/>
        </div>
        <div class="mdui-m-t-2">
            <button id="done" class="mdui-btn mdui-color-theme-accent mdui-ripple">Done</button>
            <button id="net" class="mdui-btn mdui-ripple mdui-float-right">Acdp Net</button>
        </div>
    </div></div></div>
</div>

<div class="mdui-dialog" id="continue">
    <div class="mdui-dialog-content">
        <div class="mdui-typo-title"><strong>确认信息 | Confirm information</strong></div>
        <div class="mdui-typo mdui-m-b-2"><hr/></div>
        <div class="mdui-typo-body-2">这台电脑将会以 <strong id="ac"></strong> 的身份，连接到 <strong id="adr"></strong> 行星网络中。</div>
        <div class="mdui-typo-body-2">This computer will connect to the planet network of <strong id="adr_en"></strong> as account <strong id="ac_en"></strong> .</div>
    </div>
    <div class="mdui-dialog-actions">
        <button id="sure" class="mdui-btn mdui-ripple mdui-color-theme-accent mdui-text-color-white" onclick="">确认</button>
        <button class="mdui-btn mdui-ripple mdui-text-color-black" onclick="inst.close();">取消</button>
    </div>
</div>

<div class="mdui-dialog" id="acdp">
    <div class="mdui-dialog-content">
        <div class="mdui-typo-title"><strong>Acdp Net</strong></div>
        <div class="mdui-typo mdui-m-b-2"><hr/></div>
        <div class="mdui-typo-body-2">使用唯一 ID 来登录 Acdp Net | Login to Acdp Net as Unique Identity</div>
        <div class="mdui-textfield mdui-m-t-1">
            <label class="mdui-textfield-label">唯一ID | Unique Identity</label>
            <input id="acdpid" style="text-align:center;" class="mdui-textfield-input" type="text"/>
        </div>
    </div>
    <div class="mdui-dialog-actions">
        <button id="acsure" class="mdui-btn mdui-ripple mdui-color-theme-accent mdui-text-color-white" onclick="">确认</button>
        <button class="mdui-btn mdui-ripple mdui-text-color-black" onclick="acdp.close();">取消</button>
    </div>
</div>

<script
    src="https://cdn.jsdelivr.net/npm/mdui@1.0.1/dist/js/mdui.min.js"
    integrity="sha384-gCMZcshYKOGRX9r6wbDrvF+TcCCswSHFucUzUPwka+Gr+uHgjlYvkABr95TCOz3A"
    crossorigin="anonymous"
></script>
<script>
    var inst = new mdui.Dialog('#continue');
    var acdp = new mdui.Dialog('#acdp');

    document.onkeydown = function(event){
        var code = event.keyCode;
        if(code == 13){
            if (inst.getState() == "opened"){
                document.getElementById("sure").click();
                return
            } 
            if (acdp.getState() == "opened"){
                document.getElementById("acsure").click();
                return
            }
            document.getElementById("done").click();
        }
    }
    document.getElementById("done").onclick = function(){
        var addr = document.getElementById("addr").value;
        var pwd = document.getElementById("pwd").value;
        var acc = document.getElementById("acc").value;
        if (addr && pwd && acc){
            document.getElementById("adr").innerText = addr;
            document.getElementById("ac").innerText = acc;
            document.getElementById("adr_en").innerText = addr;
            document.getElementById("ac_en").innerText = acc;
            inst.open();
        }
    }
    document.getElementById("net").onclick = function(){
        acdp.open();
    }
    document.getElementById("sure").onclick = function(){
        inst.close()
    }
    document.getElementById("acsure").onclick = function(){
        acdp.close()
    }
    
</script>

{% endblock %}